feat(university): enhance flow banner dark mode path animations and s… - #112
Conversation
…implify branch cards
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThe university branch grid now uses availability-aware card styling and CTAs. The university flow banner updates rope visuals and applies progress-aware styling to active, completed, and upcoming nodes. ChangesUniversity UI Visual Updates
Estimated code review effort: 2 (Simple) | ~15 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🎉 Congratulations @nitinmohan18!Thank you for contributing to HyperLearningTech. Your pull request has been successfully merged into main. 📦 Merge Summary
🚀 Keep Contributing
Thank you for helping make HyperLearningTech better. Happy Coding! 🚀 |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/university/branch-grid.tsx`:
- Around line 114-118: The available-card Link in the branch card should retain
a visible keyboard focus indicator instead of relying only on hover styles.
Update the Link’s focus styling near the existing outline removal to add an
accessible focus-visible ring or equivalent indicator, while preserving the
current hover and available/unavailable card behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 1f51a1d5-521a-47eb-ab63-2be454a32e4c
📒 Files selected for processing (2)
components/university/branch-grid.tsxcomponents/university/university-flow-banner.tsx
| className={`group relative h-full overflow-hidden rounded-2xl border p-5 sm:p-6 transition-all duration-300 ${ | ||
| isAvailable | ||
| ? "border-slate-200 bg-white shadow-[0_1px_3px_rgba(0,0,0,0.06),0_6px_16px_rgba(0,0,0,0.04)] hover:border-blue-200 hover:shadow-[0_8px_30px_rgba(59,130,246,0.12),0_1px_3px_rgba(0,0,0,0.06)] hover:-translate-y-1 dark:border-white/[0.08] dark:bg-white/[0.03] dark:shadow-[0_2px_8px_rgba(0,0,0,0.4)] dark:hover:border-blue-500/25 dark:hover:shadow-[0_12px_32px_rgba(0,0,0,0.4),0_0_0_1px_rgba(59,130,246,0.1)]" | ||
| : "border-slate-200/50 bg-slate-50/80 shadow-[0_1px_2px_rgba(0,0,0,0.03)] dark:border-white/[0.04] dark:bg-white/[0.01]" | ||
| }`} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Restore a visible keyboard focus indicator.
The new card affordances are hover-only. Since the available-card Link removes its default outline at Line 191, keyboard users cannot identify the focused branch card.
Proposed fix
- className="block focus:outline-none"
+ className="block rounded-2xl focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-600 dark:focus-visible:outline-blue-400"🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/university/branch-grid.tsx` around lines 114 - 118, The
available-card Link in the branch card should retain a visible keyboard focus
indicator instead of relying only on hover styles. Update the Link’s focus
styling near the existing outline removal to add an accessible focus-visible
ring or equivalent indicator, while preserving the current hover and
available/unavailable card behavior.
…implify branch cards
Summary by CodeRabbit